﻿@{
    ViewBag.Title = "数据库连接列表";
    Layout = "~/Views/Shared/_Main.cshtml";
}
@section Head{
    <script type="text/javascript">
        var clickAll = false;
        var UrlArray = $.getUrlArray();
        var retArr = new Array();
        var sqlcolumns = [
                    { field: 'Host', title: '地址', width: 30 },
                    { field: 'Server', title: '数据库名', width: 25 },
                    { field: 'User', title: '用户名', width: 15 },
                    { field: 'Description', title: '描述', width: 30 }
            ];
        var oracolumns = [
                    { field: 'Host', title: '地址', width: 25 },
                    { field: 'Server', title: '数据库名', width: 20 },
                    { field: 'User', title: '用户名', width: 15 },
                    { field: 'Part', title: '端口', width: 15 },
                    { field: 'Description', title: '描述', width: 25 }
            ];
        var filecolumns = [
                    { field: 'FileUrl', title: '地址', width: 35 },
                    { field: 'FileUser', title: '用户名', width: 20 },
                    { field: 'Description', title: '描述', width: 45 }
            ];
        var opts = {
            rows: 10,
            height: 450,
            url: "/SystemConfiguration/GetEtlSourceDbConfigList?systemID=" + UrlArray["systemID"] + "&dbName=" + encodeURI(UrlArray["dbName"]),
            para: {},
            idField: "Guid",
            checkbox: true,
            columns: sqlcolumns,
            OnChickRow: function (value, rowData, rowIndex) {
                return clickRow(value, rowData, rowIndex, true);
            }
        };
        function clickRow(value, rowData, rowIndex, load) {
            if (retArr.length > 0) {
                alert("最多可选一条记录。");
                return false;
            }
            $("#sel_content").append("<span class='s1 s1" + value + "'><a title='" + rowData.Host + "'>" + rowData.Host + "</a><span class='s2 s2" + value + "''>&nbsp;X&nbsp;</span></span>");
            $(".s2" + value).bind("click", function () {
                $(".s1" + value).remove();
                $(".s2" + value).remove();
                for (var j = 0; j < retArr.length; j++) {
                    if (retArr[j].Guid == value) {
                        retArr.removeAt(j);
                        j--;
                    }
                }
                $("#DataGrid").dg(opts);
            });
            retArr.push(rowData);
            return true;
        }
        $(function () {
            $("#DataGrid").dg(opts);
        });
        function btnSearch() {
            opts.para["Host"] = $.trim($("#txt_Host").val());
            opts.para["Server"] = $.trim($("#txt_Server").val());
            opts.para["Description"] = $.trim($("#txt_Description").val());
            thisPageNum = 1;
            $("#DataGrid").dg(opts);
        }
        function flexiSelect() {
            if (retArr.length < 1) {
                alert('请选择一条数据!');
                return false;
            }
            returnParent(retArr);
            return false;
        }
    </script>
}
<div style="height: 470px; padding-left: 5px; padding-right: 5px; overflow-y: scroll;">
    <table class="listTitle">
        <tr>
            <td width="15">
                <img src="/images/search.png" />
            </td>
            <td width="300">
                数据库连接列表搜索
            </td>
            <td align="right">
            </td>
        </tr>
    </table>
    <table class="searchArea" width="100%">
        <tr>
            <td>
                地址：
                <input type="text" id="txt_Host" style="width: 120px;" />
                数据库：
                <input type="text" id="txt_Server" style="width: 120px;" />
                描述：
                <input type="text" id="txt_Description" style="width: 165px;" />
                <input type="button" value="搜索" class="button" onclick="btnSearch()" />
            </td>
        </tr>
    </table>
    <table id="selected" style="width: 100%;">
        <tr>
            <td width="50">
                已选择：
            </td>
            <td>
                <div id="sel_content">
                </div>
            </td>
            <td width="50">
                <input type="button" value=" 确定 " class="button" onclick="flexiSelect()" />
            </td>
        </tr>
    </table>
    <table class="listTitle">
        <tr>
            <td width="15">
                <img src="/images/filesave.png" />
            </td>
            <td width="300">
                连接列表
            </td>
            <td align="right">
            </td>
        </tr>
    </table>
    <table id="DataGrid" class="pagTable" cellpadding="0" cellspacing="0">
    </table>
    <div>
        <div id="Pagination" class="pagination">
        </div>
        <div id="loading" class="loading">
            <img src="/Images/tree_loading.gif" />
        </div>
    </div>
    <div id="msg">
    </div>
</div>
